<template>
  <div
    :id="id"
    :style="{
      width: width,
      height: height
    }"
    v-echart-resize
  ></div>
</template>

<script setup>
import { computed, defineProps, onMounted, onUnmounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
import { unwarp } from '@/utils/commUtils'

const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: '车位数'
  },
  count: {
    type: Number,
    default: 190
  },
  countAll: {
    type: Number,
    default: 200
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  }
})
const chart = ref(null)
const lotcolor1 = new echarts.graphic.RadialGradient(
  0,
  0,
  1,
  [
    {
      offset: 0,
      color: '#E9F134'
    },
    {
      offset: 1,
      color: '#BC9715'
    }
  ],
  false
)
const lotcolor2 = new echarts.graphic.RadialGradient(
  0,
  0,
  1,
  [
    {
      offset: 0,
      color: '#BE4014'
    },
    {
      offset: 1,
      color: '#E1A031'
    }
  ],
  false
)
const persent = ref(0.3)

const setOptions = (count, countAll, persent) => {
  const colorset1 = [
    [persent, lotcolor1],
    [1, 'rgba(121, 121, 121, 0.22)']
  ]
  const colorset2 = [
    [persent, lotcolor2],
    [1, 'rgba(121, 121, 121, 0.22)']
  ]
  const option = {
    // backgroundColor: '#051F54',
    title: {
      text:
        persent < 0.8
          ? '{a|' + props.title + '}\n{c|' + count + '/' + countAll + '}'
          : '{a|' +
            props.title +
            '}\n{b|' +
            count +
            '}' +
            '/' +
            '{c|' +
            countAll +
            '}',
      x: 'center',
      y: 'center',
      textStyle: {
        rich: {
          a: {
            fontSize: '0.4375rem',
            color: '#ffffff',
            fontFamily: 'Adobe Heiti Std',
            fontStyle: 'italic'
          },
          b: {
            fontSize: '0.375rem',
            color: '#E41616',
            fontFamily: 'Eras Medium ITC',
            padding: [5, 0],
            fontStyle: 'italic'
          },
          c: {
            fontSize: '0.375rem',
            color: '#ffffff',
            padding: [5, 0],
            fontFamily: 'Eras Medium ITC',
            fontStyle: 'italic'
          }
        }
      }
    },
    series: [
      {
        type: 'gauge',
        radius: '99%',
        clockwise: true,
        startAngle: '90',
        endAngle: '-269.9999',
        splitNumber: 50,
        detail: {
          offsetCenter: [0, -20],
          formatter: ' '
        },
        pointer: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: props.title === '车位数' ? colorset1 : colorset2,
            width: 14
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false,
          length: 32,
          lineStyle: {
            color: 'rgba(0, 0, 0, 0.1)',
            width: 16
          }
        },
        axisLabel: {
          show: false
        }
      },
      {
        type: 'pie',
        name: '内层细圆环',
        radius: ['61%', '63%'],
        hoverAnimation: false,
        z: 3,
        // startAngle: 200,
        itemStyle: {
          normal: {
            color: '#D8D246'
          }
        },
        label: {
          show: false
        },
        data: [100]
      }
      // {
      //   //内圆
      //   type: 'pie',
      //   radius: '61%',
      //   center: ['50%', '50%'],
      //   z: 2,
      //   itemStyle: {
      //     normal: {
      //       color: 'rgba(0, 0, 0, 0.001)',
      //       label: {
      //         show: false
      //       },
      //       labelLine: {
      //         show: false
      //       }
      //     }
      //   },
      //   hoverAnimation: false,
      //   label: {
      //     show: false
      //   },
      //   tooltip: {
      //     show: false
      //   },
      //   data: [100]
      // }
    ]
  }
  unwarp(chart.value).setOption(option)
}

const initChart = () => {
  setTimeout(() => {
    if (!chart.value) {
      chart.value = echarts.init(document.getElementById(props.id))
    }
    setOptions(props.count, props.countAll, persent.value)
  }, 0)
}

onMounted(() => {
  initChart()
})

onUnmounted(() => {
  if (!chart.value) {
    return
  }
  chart.value.dispose()
  chart.value = null
})

watch(
  () => props.count,
  () => {
    const p = (props.count / props.countAll).toFixed(2)
    setOptions(props.count, props.countAll, p)
    persent.value = p
  }
)
</script>

<style lang="scss" scoped>
</style>
